'use client'

import { useState, useEffect } from 'react'
import { VmsCourseSection } from '@/types/Model'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import dynamic from 'next/dynamic'

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
import 'react-quill/dist/quill.snow.css'

interface EnhancedSectionFormProps {
  section?: VmsCourseSection | null
  onCancel: () => void
  onSubmit: (section: Partial<VmsCourseSection>) => void
  showContentEditor?: boolean  // 新增：控制是否显示内容编辑器
}

export default function EnhancedSectionForm({ 
  section, 
  onCancel, 
  onSubmit,
  showContentEditor = false  // 默认不显示内容编辑器，用于快速编辑
}: EnhancedSectionFormProps) {
  const [formData, setFormData] = useState({
    title: section?.title || '',
    content: section?.content || '',
    published: section?.published || false,
    // video_url: section?.video_url || '',
    // audio_url: section?.audio_url || ''
  })

  // 当section变化时更新表单数据
  useEffect(() => {
    if (section) {
      setFormData({
        title: section.title || '',
        content: section.content || '',
        published: section.published || false,
        // video_url: section.video_url || '',
        // audio_url: section.audio_url || ''
      })
    }
  }, [section])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit(formData)
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <Label className="block text-sm font-medium text-slate-700 mb-2">
          小节标题
        </Label>
        <Input
          value={formData.title}
          onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
          placeholder="输入小节标题"
          required
        />
      </div>
      
      {/* 根据showContentEditor控制是否显示内容编辑器 */}
      {showContentEditor && (
        <div>
          <Label className="block text-sm font-medium text-slate-700 mb-2">
            小节内容
          </Label>
          <ReactQuill
            value={formData.content}
            onChange={(content) => setFormData(prev => ({ ...prev, content }))}
            placeholder="输入小节内容"
          />
        </div>
      )}
      
      {/* <div>
        <Label className="block text-sm font-medium text-slate-700 mb-2">
          视频链接
        </Label>
        <Input
          value={formData.video_url}
          onChange={(e) => setFormData(prev => ({ ...prev, video_url: e.target.value }))}
          placeholder="输入视频URL（可选）"
          type="url"
        />
      </div> */}
      
      {/* <div>
        <Label className="block text-sm font-medium text-slate-700 mb-2">
          音频链接
        </Label>
        <Input
          value={formData.audio_url}
          onChange={(e) => setFormData(prev => ({ ...prev, audio_url: e.target.value }))}
          placeholder="输入音频URL（可选）"
          type="url"
        />
      </div> */}
      
      <div className="flex items-center space-x-2">
        <Switch
          id="published"
          checked={formData.published}
          onCheckedChange={(checked) => setFormData(prev => ({ ...prev, published: checked }))}
        />
        <Label htmlFor="published" className="text-sm font-medium text-slate-700">
          立即发布
        </Label>
      </div>
      
      <div className="flex justify-end gap-3">
        <Button type="button" variant="outline" onClick={onCancel}>
          取消
        </Button>
        <Button type="submit" className="bg-gradient-to-r from-rose-600 to-rose-700 hover:from-rose-700 hover:to-rose-800 text-white">
          {section ? '更新小节' : '创建小节'}
        </Button>
      </div>
    </form>
  )
}